<template>
    <div class="mine-order">
        <div class="mine-order-list">
            <dl class="mine-order-box clearfix" @click="go">
                <dt>
                    <div class="order-pic" v-lazy:background-image="img"></div>
                </dt>
                <dd class="icon-right"></dd>
                <dd>
                    <h6>中石化加油卡充值码</h6>
                    <div class="date-box">
                        <span>2018-8-23  18:23:45</span><div class="trader-btn">成功</div>
                    </div>
                </dd>
            </dl>
            <dl class="mine-order-box clearfix">
                <dt>
                    <div class="order-pic"  v-lazy:background-image="img"></div>
                </dt>
                <dd class="icon-right"></dd>
                <dd>
                    <h6>中石化加油卡充值码</h6>
                    <div class="date-box">
                        <span>2018-8-23  18:23:45</span>
                        <div class="trader-btn fail-btn">失败</div>
                    </div>
                </dd>
            </dl>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                img:'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg'
            }
        },
        // you can find current swiper instance object like this, while the notNextTick property value must be true
        // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
        methods: {
            go(item){
                item = {
                    id:1
                };
                this.$router.push({path:'/exchange/'+item.id,})
            }
        },
        mounted() {
            document.title = '我的订单';
        }
    }
</script>

<style scoped>
    .mine-order-list{
        width: 94%;
        margin: 0 auto;
    }
.mine-order-box{
    padding: .35rem .6rem .2rem 2.2rem;
    border-bottom: 1px solid #f1f1f1;
    position: relative;
}
.mine-order-box dt {
    margin-left:-2.2rem;
    width: 1.9rem;
    height: 1rem;
    float: left;
}
.order-pic{
    width: 1.9rem;
    height: 1rem;
    border-radius:8px;
    background-image: url(./../../static/img/mbg1.jpg);
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.mine-order-box dd{
    margin-inline-start:0;
}
.mine-order-box h6{
    font-size: .32rem;
    text-overflow:ellipsis;
    overflow: hidden;
    width: 100%;
}
.mine-order-box dd.icon-right{
    width:.4rem;
    height:.4rem;
    background-image: url(./../../static/img/arrow-right.png);
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    right: .3rem;
    top: 50%;
    margin-top: -.2rem;
}
.date-box{
    margin-top:.2rem;
    font-size: 0;
}
.date-box span{
    display: inline-block;
    vertical-align: middle;
    color:#666;
    font-size: .24rem;
    line-height: .36rem;
    margin-right: .2rem;
}
.trader-btn,.fail-btn{
    vertical-align: middle;
    display: inline-block;
    padding:0 .5em;
    height: .36rem;
    line-height: .36rem;
    background:#333;
    color: #ffd791;
    font-size: .24rem;
    text-align: center;
    border-radius: 4px;
}
.fail-btn{
    background:#ff827d;
    background:-moz-linear-gradient(left,#ff827d,#ff9d77);
    background:-webkit-linear-gradient(left,#ff827d,#ff9d77);
    color: #fff;
}




</style>

